import React from "react";
import { Table } from "antd";
import EditJoin from "./EditJoin";
/**table列表属性 */

export default class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: props.dataSource,
      // total: props.total,
      changePage: props.changePage,
      current: props.current,
      changeSelect: props.changeSelect,
    };
  }

  /**复选框变化 */
  onSelectChange = (selectedRowKeys) => {
    this.props.changeSelect(selectedRowKeys);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const { dataSource, current, getDataSource, rows, total } = this.props;

    const columns = [
      {
        title: "序号",
        dataIndex: "meetingKey",
        key: "meetingKey",
        width: 80,
      },

      {
        title: "日期",
        dataIndex: "meetingDate",
        key: "meetingDate",
        width: 120,
      },
      {
        title: "事件内容",
        dataIndex: "meetingContent",
        key: "meetingContent",
      },
      {
        title: "时间",
        dataIndex: "meetingTime",
        key: "meetingTime",
        width: 150,
        render: (enable, record) => (
          <>{record.meetingTime + " ~ " + record.meetingEndTime}</>
        ),
      },
      {
        title: "地点",
        dataIndex: "meetingAddress",
        key: "meetingAddress",
        width: 150,
      },
      {
        title: "出席领导",
        dataIndex: "meetingLeaders",
        key: "meetingLeaders",
        width: 150,
      },
      {
        title: "责任部门",
        dataIndex: "responsibleDepartment",
        key: "responsibleDepartment",
        width: 300,
      },
      {
        title: "备注",
        dataIndex: "remark",
        key: "remark",
        width: 300,
      },

      // {
      //   title: "活动室",
      //   dataIndex: "meetingRoom",
      //   key: "meetingRoom",
      //   width: 150,
      // },
      // {
      //   title: "提醒时间",
      //   dataIndex: "remindTime",
      //   key: "remindTime",
      //   width: 150,
      // },

      // {
      //   title: "主持人",
      //   dataIndex: "meetingHost",
      //   key: "meetingHost",
      //   width: 120,
      //   // //人员数据为json数组时
      //   // render: (_, record) => {
      //   //   let namelist = "";
      //   //   if (record.meetingHost.length > 1) {
      //   //     record.meetingHost.forEach(
      //   //       (item) => (namelist += "，" + item.name)
      //   //     );
      //   //     return <span>{namelist.slice(1)}</span>;
      //   //   } else {
      //   //     return <span>{record.meetingHost.name}</span>;
      //   //   }
      //   // },
      // },
      // {
      //   title: "参加人",
      //   dataIndex: "meetingJoin",
      //   key: "meetingJoin",
      //   ellipsis: true,
      //   width: 200,
      //   render: (_, record) => (
      //     <EditJoin
      //       getDataSource={getDataSource}
      //       record={record}
      //       page={current}
      //       rows={rows}
      //     />
      //   ),
      //   //人员数据为json数组时
      //   // render: (_, record) => {
      //   //   let namelist = "";
      //   //   if (record.meetingJoin.length > 1) {
      //   //     record.meetingJoin.forEach(
      //   //       (item) => (namelist += "，" + item.name)
      //   //     );
      //   //     return <span>{namelist.slice(1)}</span>;
      //   //   } else {
      //   //     return <span>{record.meetingJoin.name}</span>;
      //   //   }
      //   // },
      // },
      // {
      //   title: "",
      //   dataIndex: "action",
      //   key: "action",
      //   width: 100,
      //   render: (_, record) => (
      //     <EditTable
      //       getDataSource={getDataSource}
      //       record={record}
      //       page={current}
      //       rows={rows}
      //     ></EditTable>
      //   ),
      // },
      {
        title: "状态",
        dataIndex: "enable",
        key: "enable",
        width: 100,
        render: (enable, record) => (
          <>
            <EditJoin
              getDataSource={getDataSource}
              record={record}
              page={current}
              rows={rows}
            />
          </>
        ),
      },
    ];

    /**选中的行 */
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    /**分页控制 */
    const PaginationProps = {
      showSizeChanger: true,
      total: total,
      showTotal: () => `共 ${total} 个活动`,
      onChange: (current) => {
        // console.log(current);
        this.props.changePage(current);
        this.setState({ current: current });
      },
      onShowSizeChange: this.props.changeRows,
      current: current,
    };

    return (
      <div>
        <Table
          dataSource={dataSource}
          pagination={PaginationProps}
          columns={columns}
          rowSelection={rowSelection}
          bordered
          className="meeting-table"
          scroll={{ y: 500 }}
        />
      </div>
    );
  }
}
